<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="dist/css/layui.css"  media="all">
<script src="/dist/layui.js" charset="utf-8"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> 
</head>
<body>

<form class="layui-form" onsubmit="return checkUser();">
<!-- 单行输入框 -->
<div class="layui-form-item" style="display:inline-block;margin-top:30px;">
    <label class="layui-form-label">公告内容</label>
    <div class="layui-input-block" style="width:500px;font-size:18px">
      <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" id="content">
    </div>
</div>

<!-- 单行选择框 -->
<div class="layui-form-item" style="display:inline-block;margin-top:30px;">
    <label class="layui-form-label" style="font-size:18px;">状态</label>
    <div class="layui-input-block" style="width:100px;">
      <select name="interest1" lay-filter="aihao" id="status">
        <option value=""></option>
        <option value="0">撤回</option>
        <option value="1">公布</option>
      </select>
    </div>
</div>

<!-- 单行选择框 -->
<div class="layui-form-item" style="display:inline-block;margin-top:30px;margin-right:50px;">
    <label class="layui-form-label" style="font-size:18px;">是否顶置</label>
    <div class="layui-input-block" style="width:100px;">
      <select name="interest2" lay-filter="aihao" id="istop">
        <option value=""></option>
        <option value="0">否</option> 
        <option value="1">是</option>
      </select>
    </div>
</div>
<button type="button" class="layui-btn layui-btn-normal layui-btn-radius" id="btn">搜索</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i>清空</button>

</form>
<button type="button" class="layui-btn" style="margin-left:20px">增加</button>
<table class="layui-hide" id="test" lay-filter="test"></table>
 
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
 
<script>
layui.use('table', function(){
  var table = layui.table
  ,form = layui.form
  
   table.render({
    elem: '#test'
    ,url:"/TzCategory/test"
    ,toolbar: '#toolbarDemo'
    ,title: '用户数据表'
    ,totalRow: true
    ,cols: [[
      {type: 'checkbox', fixed: 'left'}
      ,{field:'id', title:'ID', width:180}
      ,{field:'content', title:'公告内容', width:420}
      ,{field:'status', title:'状态', width:200}
      ,{field:'istop', title:'是否顶置', width:200}
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
    ]]
    ,page: true
    , request: {                              //request设置，默认值如下
        pageName: 'page',
        limitName: 'limit'
    }
   
  });  
 

  
//监听工具条 
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
   
    if(layEvent === 'detail'){ //查看
      //do somehing
    } else if(layEvent === 'del'){ //删除
      layer.confirm('真的删除行么', function(index){
        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
        layer.close(index);
        //向服务端发送删除指令
      });
    } else if(layEvent === 'edit'){ //编辑
      //do something
        //iframe层
        layer.open({
          type: 2,
          title: '修改',
          shadeClose: true,
          shade: 0.8,
          area: ['800px', '60%'],
          content: 'edit' //iframe的url
        }); 
      
      //同步更新缓存对应的值
      obj.update({
        username: '123'
        ,title: 'xxx'
      });
    } else if(layEvent === 'LAYTABLE_TIPS'){
      layer.alert('Hi，头部工具栏扩展的右侧图标。');
    }
  });
});


layui.use(['form', 'layedit', 'laydate','element','jquery'], function() {
	  var table = layui.table
	  ,form = layui.form
	var form = layui.form,
	layer = layui.layer,
	element=layui.element,
	$=layui.jquery;
	$(document).on('click','#btn',function(){
			var content = $("#content").val();
			var istop = $("#istop").val();
			var status = $("#status").val();
		   table.render({
			    elem: '#test'
			    ,url:"/TzCategory/test?content="+content+"&status="+status+"&istop="+istop
			    ,toolbar: '#toolbarDemo'
			    ,title: '用户数据表'
			    ,totalRow: true
			    ,cols: [[
			      {type: 'checkbox', fixed: 'left'}
			      ,{field:'id', title:'ID', width:180}
			      ,{field:'content', title:'公告内容', width:420}
			      ,{field:'status', title:'状态', width:200}
			      ,{field:'istop', title:'是否顶置', width:200}
			      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
			    ]]
			    ,page: true
			    , request: {                              //request设置，默认值如下
			        pageName: 'page',
			        limitName: 'limit'
			    }
			   
			  });
	});
	});
</script>

</body>
</html>